<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_计算属性和监视</title>
</head>
<body>
<!--
1. 计算属性
  在computed属性对象中定义计算属性的方法
  在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
  通过通过vm对象的$watch()或watch配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
  通过getter/setter实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次getter计算
-->
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
  姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el:'#demo',
    data () {
      return {
        firstName:'zhang',
        lastName:'jie',
        fullName2:'zhang jie',
      }
    },
    computed:{
      //计算属性默认为get方法
      fullName1:function(){
        return this.firstName + ' ' + this.lastName
      },
      //双向 - 计算属性
      fullName3:{
        //回调函数，显示value时调用，用来根据vm其他的数据来计算返回结果
        get(){
          return this.firstName + this.lastName
        },
        //回调函数，属性值发生改变时调用，用来监视当前属性值的变化，更新相关的属性数据
        set(val){
          let names=val.split(' ')
          this.firstName =names[0]
          this.lastName =names[1]
        }
      }
    },
    watch:{//监视vm属性的变化
      firstName:function (val) {
        this.fullName2= val + ' ' +this.lastName
      }
    }
  })

  //实例
  //vm.$watch(监视的内容,回调函数)
  vm.$watch('lastName',function (val) {
    this.fullName2 = this.firstName + val
  })

</script>
</body>
</html>